<template>
  <div class="contents">
    <el-form
      ref="form"
      :rules="worklogRules"
      :model="tbwork.tbWorklog"
      label-width="100px">
    <el-row>
      <el-col :span="24">
          <div class="head">
              <div class="one">
              <el-row :gutter="10">
                  <el-col :span="11" :offset="1">
          <el-form-item
              label="日期："
              prop="workdate"
              label-width="100px"
            >
              <el-date-picker
                v-model="tbwork.tbWorklog.workdate"
                size="small"
                type="datetime"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                style="width: 100%"
              ></el-date-picker>
              <!-- v-if="isEdit == 1"
              <span v-if="isEdit == 0">{{ worklogForm.worklogTime }}</span> -->
            </el-form-item>
                  </el-col>
                  <el-col :span="10">
            <el-form-item label="手机号码：" prop="mobile">
                <el-input
                  size="small"
                  v-model="tbwork.tbWorklog.mobile"
                ></el-input>
                <!-- v-if="isEdit == 1" -->
                <!-- <span v-if="isEdit == 0">{{ worklogForm.name }}</span> -->
              </el-form-item>
                  </el-col>
                </el-row>
              </div>
                <el-row type="flex" justify="center">
                  <el-col :span="23">
                    <span>本周工作总结：</span>
                    <el-form-item  prop="worksummary">
                    <el-input placeholder="请输入内容" v-model="tbwork.tbWorklog.worksummary"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
        </div>
      </el-col>
    </el-row>
    <el-card class="box-card">
      <div class="second">
          <el-row type="flex" justify="space-between">
          <el-col :span="10">
            <span>工作明细</span>
          </el-col>
          <el-col :span="14">
            <div class="but">
            <el-button type="success"  size="small " icon="el-icon-circle-plus-outline" @click="addLog()"
              >新增明细</el-button>
              </div></el-col>
          </el-row>
      </div>
    <el-table :data="tbwork.tbWorklogDetailList" style="width: 100%" stripe border ref="multipleTable"
              tooltip-effect="dark" @selection-change="handleSelectionChange">
      <!-- <el-table-column prop="worklogid" label="主表id" align="center" width="80">
      </el-table-column> -->
      <el-table-column prop="worktype" label="工作类型"  align="center">
      </el-table-column>
      <el-table-column prop="workdesc" label="工作事项">
      </el-table-column>
      <el-table-column prop="worktime" label="工作用时" align="center">
      </el-table-column>
      <!-- <el-table-column prop="jobType" label="作业类别" align="center">
      </el-table-column> -->
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          </el-button>
          <el-button type="primary" icon="el-icon-edit" title="单编辑" circle
                      @click.native.prevent="EditRow(scope.row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" title="删除" circle
                      @click.native.prevent="DelAction(scope.row)" >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
      <!-- ====================主表格 分页===================== -->
      <!-- <el-col :span="20">
        <div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[8, 15]"
            :pager-count="5"
            :current-page.sync="listQuery.pageNum"
            :total="total"
          ></el-pagination>
        </div>
      </el-col> -->
    </el-row>
        <!-- ======================主表格 弹框===============---------- -->
        <el-dialog :visible.sync="multiAddVisible" :title="addtitle" width="27%" customClass="dialogClass"
                    :showClose="false" :center="true">
        <el-form label-width="100px" :model="tbworklogdetailAdd" :rules="worklogRules" ref="form">
            <el-row type="flex" justify="center">
                <el-col :span="20">
                    <el-form-item label="工作类型：" prop="worktype">
                <el-input size="small" v-model="tbworklogdetailAdd.worktype"></el-input>
              </el-form-item>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="20">
                    <el-form-item label="工作描述：" prop="workdesc">
                <el-input size="small" v-model="tbworklogdetailAdd.workdesc"></el-input>
              </el-form-item>
                </el-col>
            </el-row>
              <el-row type="flex" justify="center">
                <el-col :span="20">
                    <el-form-item label="工作用时：" prop="worktime">
                <el-input size="small" v-model="tbworklogdetailAdd.worktime"></el-input>
              </el-form-item>
                </el-col>
            </el-row>
        </el-form>
            <span slot="footer">
              <el-button round type="info" icon="el-icon-circle-close" @click="popupCancel()">取 消</el-button>
              <el-button round type="primary" icon="el-icon-circle-check" @click="Adds('form')">提 交</el-button>
            </span>
          </el-dialog>
        <el-row>
          <el-col :span="24">
            <div class="Submit">
              <el-button type="primary" @click="upload()"
                >提交<i class="el-icon-upload el-icon--right"></i
              ></el-button>

              <el-button type="primary" @click="onSubmitAll()"
                >嵌套提交<i class="el-icon-upload el-icon--right"></i
              ></el-button>
              <el-button type="primary" @click="goBack()"
                >返回主页</el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
  getLogById, //查询
  tbworkAdd,  //新增
  fetchLists,
  createWorklog,

} from "@/api/worklog";



export default {
  name: "tbworklogAdd",
  data() {
    return {
      addtitle: "新增工作日志",
      checkedName: true,
      checkedDescribe:true,
      checkedHandle:true,
      multiAddVisible:false,
      form: {
        name: ""
      },
      listQuery: {
        pageNum: 1,
        pageSize: 8
      },
      delArrParam: {
        ids: null
      },
      // 验证规则
      worklogRules: {
        workdate: [{ required: true, trigger: "blur", message: "请输入名称" }],
      // mobile: [
      //     { required: true, message: '请输入手机号码', trigger: 'blur' },
      //     { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
      //     {
      //       pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
      //       message: '请输入正确的手机号码'
      //     }
      //   ],

      worksummary: [{ required: true, trigger: "blur", message: "请输入名称" }],

        worktype: [{ required: true, trigger: "blur", message: "请输入名称" }],
        workdesc: [
          { required: true, trigger: "blur", message: "请输入描述" }
        ],
        worktime: [{ required: true, trigger: "blur", message: "请输入标签" }],
      },
      log:{
        id:null,
        workdate:null,
        mobile:null,
        worksummary:null,
      },
      tbwork:{
        //父表新增表单
        tbWorklog:{
          orgid:null,
          mobile:null,
          worksummary:null
        },
        //字表新增table表格
        tbWorklogDetailList:[],
      },
      //字表新增表单提交到表格
      tbworklogdetailAdd:{
        worktype:null,
        workdesc:null,
        worktime:null,
        worklogid:null,
      },
    };
  },

  methods: {
      //弹框取消
    popupCancel(){
      this.multiAddVisible = false;
      // this.getList();
    },

    /*返回起始页*/
    goBack(){
      this.$router.push("/worklog/index")
    },

    //按钮新增
    addLog() {
      this.multiAddVisible=true;
      this.addtitle="新增工作日志";
      this.getList();
    },
    Adds(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
      const obj = new Object();
      obj.worktype=this.tbworklogdetailAdd.worktype
      obj.workdesc=this.tbworklogdetailAdd.workdesc
      obj.worktime=this.tbworklogdetailAdd.worktime
      this.tbwork.tbWorklogDetailList.push(obj)
      this.tbworklogdetailAdd.worktype=null
      this.tbworklogdetailAdd.workdesc=null
      this.tbworklogdetailAdd.worktime=null
      this.multiAddVisible = false;
      } else {
          this.$message.error("表单信息不能为空");
        }
      });
    },

    //提交一
    upload(){
       this.$confirm("是否确定提交", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("11111" + this.tbwork.tbWorklogDetailList.workdesc)
        tbworkAdd(this.tbwork).then(response => {
          if (response.code == 200) {
              this.$message({
                message: "提交成功",
                type: "success",
                duration: 1000
              });
            } else {
              this.$message({
                message: response.msg,
                type: "error",
                duration: 1000
              });
            }
        })
      })
    }











  //   created() {
  //   // this.getList();
  //   const id = this.$route.query.id;
  //   alert(id)
  //   if (id != null) {
  //     this.getLogById(id);
  //   }
  // },

    //分页
    // getList() {
    //   fetchLists(this.listQuery).then(response => {
    //     this.listLoading = false;
    //     this.list = response.data.records;
    //     this.arr = response.data.records;
    //     this.total = response.data.total;
    //     this.totalPage = response.data.pages;
    //     this.pageSize = response.data.size;
    //   });
    // },
    // handleSizeChange(val) {
    //   this.listQuery.pageNum = 1;
    //   this.listQuery.pageSize = val;
    //   this.getList();
    // },
    // handleCurrentChange(val) {
    //   this.listQuery.pageNum = val;
    //   this.getList();
    // },


  
   

  // getLogById(id) {
  //     getLogById(id).then(response => {
  //       if (response.code == 200) {
  //         this.interviewForm = response.data;
  //       } else {
  //         this.$message({
  //           message: response.msg,
  //           type: "error",
  //           duration: 1000
  //         });
  //       }
  //     });
  //   }
  // },

 
  }

    // onSubmitAll() {
    //   var obj = new Object();
    //   obj.workdesc = "aa"
    //   obj.worktype= 2;

    //   var obj2 = new Object();
    //   obj2.workdesc = "bb"
    //   obj2.worktype= 3;

    //   this.formData.tbWorklogDetailList.push(obj)
    //   this.formData.tbWorklogDetailList.push(obj2)


    //   createWorklog(this.formData).then(response => {
    //           console.log(response)
    //       });
    // },

}
</script>



<style>
.contents {
  width: 97%;
  margin: 1% 1.5% 0 1.5%;
}
.head{
    border: 1px solid rgb(11, 11, 11);
    height: 18vh;
}
.box-card {
  width: 100%;
}

.one{
    padding-top: 1%;
    height: 9vh;
    /* background-color: rgb(119, 143, 143); */
    /* line-height: 10vh; */
}

.second{
    margin-bottom: 1%;
}
.Submit{
    margin-top: 2%;
    text-align: right;
}

.but{
    text-align: right;
}
.dialogClass{
  border-radius: 20px;
}

.hint{
  border: 1px solid whitesmoke;
  padding-left: 20px;
  line-height: 100px;
  border-radius: 4px;
  height: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

</style>
